<template>
  <div>
    <div class="ed">
      <br />
      <div class="syed">
        <h3>
          信用卡本月需要还款:
          <span>{{ banlance }}</span>
          元
        </h3>
      </div>
    </div>
    <div class="kbt">
      <el-button @click="shenqing">申请信用卡</el-button>
      <el-button @click="dianji">我的信用卡</el-button>
      <!--      <el-button @click="binding = true">绑定信用卡</el-button>-->
    </div>

    <el-dialog
      v-model="dialogTableVisible"
      draggable="true"
      title="Shipping address"
      width=""
    >
      <el-table :data="tableData">
        <el-table-column prop="cardnumber" label="卡号" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.cardnumber.length == 16">
              {{ scope.row.cardnumber.substring(0, 4) }}******{{
                scope.row.cardnumber.substring(12, 16)
              }}
            </el-tag>
            <el-tag v-if="scope.row.cardnumber.length == 19">
              {{ scope.row.cardnumber.substring(0, 4) }}******{{}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="realname" label="持卡人" width="180" />
        <el-table-column prop="sex" label="性别" width="180">
          <template #default="scope">
            <div>{{ scope.row.sex == 1 ? '男' : '女' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="idcard" label="身份证号码" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.idcard.length == 18">
              {{ scope.row.idcard.substring(0, 6) }}******{{
                scope.row.idcard.substring(14, 18)
              }}
            </el-tag>
            <el-tag v-if="scope.row.idcard.length == 15">
              {{ scope.row.idcard.substring(0, 6) }}******{{
                scope.row.idcard.substring(12, 15)
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话号码" width="180">
          <template #default="scope">
            {{ scope.row.phone.substring(0, 3) }}******{{
              scope.row.phone.substring(7, 11)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="欠款" width="180">
          <template #default="scope">
            {{ scope.row.balance }}
          </template>
        </el-table-column>
        <el-table-column label="还款" width="180">
          <template #default="scope">
            <el-button
              @click="huankuan(scope.row)"
              v-show="!scope.row.balance == 0"
            >
              还款
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="借款" width="180">
          <template #default="scope">
            <el-button @click="jie(scope.row)">借款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cloud">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!--借款-->
    <el-dialog v-model="dias" title="Tips" width="200">
      <span>
        <el-form :model="jiek">
          <el-form-item label="密码" style="width:180px">
            <el-input v-model="jiek.paypassword" type="password" />
          </el-form-item>
          <el-form-item label="借款金额" style="width:180px">
            <el-input v-model="jiek.balance" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dias = false">关闭</el-button>
          <el-button type="primary" @click="jiekuan(jiek)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--还款-->
    <el-dialog v-model="dia" title="Tips" width="" :before-close="handleClose">
      <span>
        <el-form :model="zhuan">
          <el-form-item label="密码" style="width:180px">
            <el-input v-model="zhuan.paypassword" type="password" />
          </el-form-item>
          <el-form-item label="还款金额" style="width:180px">
            <el-input v-model="zhuan.balance" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dia = false">关闭</el-button>
          <el-button type="primary" @click="huan(zhuan)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--    &lt;!&ndash;绑卡&ndash;&gt;-->
    <!--    <el-dialog-->
    <!--      v-model="binding"-->
    <!--      title="Tips"-->
    <!--      width=""-->
    <!--      :before-close="handleClose"-->
    <!--    >-->
    <!--      <span>-->
    <!--        <el-form :model="bin">-->
    <!--          <el-form-item label="卡号" style="width:180px">-->
    <!--            <el-input v-model="bin.cardnumber" />-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--      </span>-->
    <!--      <template #footer>-->
    <!--        <div class="dialog-footer">-->
    <!--          <el-button @click="binding = false">关闭</el-button>-->
    <!--          <el-button type="primary" @click="bind(bin)">-->
    <!--            确定申请-->
    <!--          </el-button>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--    </el-dialog>-->

    <!--申请信用卡-->
    <el-dialog
      v-model="dialog"
      title="Tips"
      width=""
      :before-close="handleClose"
    >
      <span>
        <el-form :model="form">
          <el-form-item label="姓名" style="width:180px">
            <el-input v-model="form.realname" />
          </el-form-item>
          <el-form-item label="性别" style="width:180px">
            <el-radio-group v-model="form.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证号" style="width:180px">
            <el-input v-model="form.idcard" />
          </el-form-item>
          <el-form-item label="手机号" style="width:180px">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="验证码" style="width:180px">
            <el-input v-model="form.code" />
          </el-form-item>
          <el-button type="primary" @click="code1(form.phone)">
            发送验证码
          </el-button>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog = false">关闭</el-button>
          <el-button type="primary" @click="en(form)">
            确定申请
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { list, open, banlan, overd, jk, bindings } from '@/api/cards'
import { getPhone } from '@/api/login'
import { onMounted, ref } from 'vue'
const dialogTableVisible = ref(false)
const tableData = ref([])
const dialog = ref(false)
const form = ref({
  realname: '',
  sex: '',
  idcard: '',
  phone: '',
  code: '',
})
const banlance = ref(0)
const dia = ref(false)
const zhuan = ref({
  cardnumber: '',
  paypassword: '',
  balance: '',
})
const jiek = ref({})
// const binding = ref(false)
const bin = ref({})
const dias = ref(false)
// const bind = async bin => {
//   var id = window.localStorage.getItem('id')
//   const { code, message, data } = await bindings(bin.cardnumber)
//   if (code == 200) {
//     alert('申请成功')
//   } else {
//     alert('申请失败')
//   }
// }

const shenqing = async () => {
  dialog.value = true
  form.value.idcard = window.localStorage.getItem('idcard')
  form.value.phone = window.localStorage.getItem('phone')
  form.value.realname = window.localStorage.getItem('realname')
  form.value.sex = window.localStorage.getItem('sex')
}
const jiekuan = async jiek => {
  jie.id = window.localStorage.getItem('id')
  jie.cardnumber = window.localStorage.getItem('jie')
  const { code, message, data } = await jk(jiek)
}
const jie = async row => {
  window.localStorage.setItem('jie', row.cardnumber)
  dias.value = true
}
const huan = async zhuan => {
  zhuan.cardnumber = window.localStorage.getItem('huan')
  console.log(zhuan)
  const { code, message, data } = await overd(zhuan)
  if (code == 200) {
    dia.value = false
    location.reload()
    alert('还款成功')
  } else {
    alert('还款失败')
  }
}
const huankuan = async row => {
  window.localStorage.setItem('huan', row.cardnumber)
  console.log(row.cardnumber)
  dia.value = true
  // zhuan.cardnumber.value=row.cardnumber
}
const chaxun = async () => {
  var phone = window.localStorage.getItem('phone')
  const { code, message, data } = await banlan(17752959186)
  if (code == 200) {
    banlance.value = data
  } else {
    alert('失败')
  }
}
onMounted(() => {
  chaxun()
})
// 申请信用卡
const en = async form => {
  let id = window.localStorage.getItem('idcard')
  console.log(id)
  const { code, message, data } = await open(form, id)
  if (code == 200) {
    alert('申请成功')
  } else {
    alert('申请失败')
  }
}
const code1 = async phone => {
  const { code, message, data } = await getPhone(phone)
  if (code === 200) {
    alert('成功')
  } else {
    alert('失败')
  }
}
const getlist = async () => {
  const { code, message, data } = await list(17752959186)
  console.log(data)
  for (let i = 0; i < data.length; i++) {
    tableData.value.push(data[i])
  }
}
const dianji = async () => {
  dialogTableVisible.value = true
  await getlist()
}
const cloud = async () => {
  tableData.value = []
  dialogTableVisible.value = false
}
// import * as echarts from 'echarts';
//
// var chartDom = document.getElementById('main');
// var myChart = echarts.init(chartDom);
// var option;
//
// option = {
//   xAxis: {
//     type: 'category',
//     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//   },
//   yAxis: {
//     type: 'value'
//   },
//   series: [
//     {
//       data: [120, 200, 150, 80, 70, 110, 130],
//       type: 'bar'
//     }
//   ]
// };
//
// option && myChart.setOption(option);
</script>

<style scoped>
.ed {
  background-color: #e0e4ef;
}
.syed {
  margin: 0 0 0 20px;
}
.kbt {
  margin: 20px 0 0 0;
  background-color: #e0e4ef;
}
</style>
